<template>
	<view class="code">
		<view class="content">
			<view class="name">{{name}}</view>
			<view class="number">数量：{{number}}</view>
			<view class="exchange_code">
				<image :src="img" />
			</view>
			<view class="people">请将以上条形码出示给兑换人员</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:'',
				name:'',
				number:0
			}
		},
		onLoad(option){
			this.img = option.img
			this.name = option.name
			this.number = option.number
		},
		onShow() {

		},
		methods:{
		}
	}
</script>

<style lang="less" scoped>
	.code {
		background: #B8212B;
		overflow: hidden;
		height: 100vh;

		.content {
			width: 630rpx;
			height: 622rpx;
			margin: 72rpx 60rpx;
			background: url(../../static/image/mine/exchange_code.png) no-repeat;
			background-size: cover;
			position: relative;

			.name {
				position: absolute;
				font-size: 34rpx;
				font-weight: 500;
				top: 8%;
				left: 15%;
			}

			.number {
				position: absolute;
				font-size: 24rpx;
				color: #999999;
				top: 16%;
				left: 15%;
			}

			.exchange_code {
				width: 523rpx;
				height: 280rpx;
				position: absolute;
				left: 50%;
				top: 37%;
				transform: translateX(-50%);
				image{
					width: 100%;
					height: 100%;
				}
			}

			.code_text {
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translateX(-50%);
				color: #666666;
			}
			.people{
				width: 100%;
				text-align: center;
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
				font-size: 26rpx;
				color: #F58611;
			}
		}
	}
</style>
